<template>
  <div>
    <nav class="site-header sticky-top ">

      <div class="container d-flex flex-column flex-md-row justify-content-between align-items-center">
        <div class="logos"><img width="100" src="../static/10026.jpg" alt="" srcset=""></div>
        <!-- <div>1</div> -->
        <div @click="pagelists(1)">
          <nuxt-link class="py-3 d-none d-md-inline-block"  :class="pagelist == 1 ? 'aaa':''"  to="/" >首页</nuxt-link>
        </div>
        <div @click="pagelists(2)">
          <nuxt-link class="py-3 d-none d-md-inline-block" :class="pagelist == 2 ? 'aaa':''" to="/recommend"  >配音员推荐</nuxt-link>
        </div>
        <div @click="pagelists(3)">
          <nuxt-link class="py-3 d-none d-md-inline-block" :class="pagelist == 3 ? 'aaa':''" to="/information">配音资讯</nuxt-link>
        </div>

        <div @click="pagelists(4)">
          <nuxt-link class="py-3 d-none d-md-inline-block" :class="pagelist == 4 ? 'aaa':''" to="/about">关于我们</nuxt-link>
        </div>

        <a class="py-3 d-none d-md-inline-block" href="#">联系我们</a>
        <a class="py-3 d-none d-md-inline-block  aaa" href="#">报价1咨询</a>
      </div>
    </nav>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pagelist:1
      }
    },
    methods:{
      pagelists(item){
        this.pagelist = item
        console.log(item)
      }
    }
  }

</script>

<style>
  .site-header {
    background-color: rgba(255, 96, 0, .85);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);

  }

  .site-header a {
    color: #fff;
    transition: ease-in-out color .15s;
    padding: 0 12px;
  }

  .site-header a:hover {
    color: #fff;
    text-decoration: none;
  }
  .logos{
    /* width: 120px; */
  }
  @media (min-width: 768px) {
    .d-md-inline-block {
      display: inline-block !important;
    }
  }
  .aaa{
    border-bottom: 4px solid rgb(255, 255, 255);
  }
</style>
